<template>
	<component :is="props.config.name" :config="config" :key="props.config.i" ref="componentRef" />
</template>
<script setup>
	import { designStore } from '@/views/plugin/dashboard/store'
	import { cloneDeep } from 'lodash-es'
	const useDesignStore = designStore()
	// 定义渲染数据结构
	const props = defineProps({
		config: {
			type: Object,
			default: () => {}
		}
	})

	// 组件引用
	const componentRef = ref(null)

	// 刷新方法
	const onReload = () => {
		// 如果子组件有 onReload 方法则调用
		if (componentRef.value && typeof componentRef.value.onReload === 'function') {
			componentRef.value.onReload()
		}
	}
	const handData = ref({})
	watch(
		() => props.config.data,
		(newVal, oldVal) => {
			handData.value = cloneDeep(newVal) || {}
		},
		{ deep: true, immediate: true }
	)
	const config = computed(() => {
		return {
			...props.config,
			data: handData.value
		}
	})

	// 向外暴露 onReload 方法
	defineExpose({
		onReload
	})
</script>
<style scoped lang="less"></style>
